<template>
    <el-menu
        :default-active="currentpath"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#fff"
        text-color="black"
        active-text-color="#ffd04b"
        router
        :unique-opened="true"
        v-if="userinfo"
    >
        <template v-for="(menu,i) in menus" >
            <template  v-if="userinfo.roleid>=menu.premession">
                <el-menu-item :key="i" v-if="!menu.children " :index="menu.path">
                    <i :class="menu.icon"></i>
                    <span slot="title">{{menu.text}}</span>
                </el-menu-item>
                <el-submenu v-else :key="i" :index="menu.path">
                    <template slot="title" >
                        <i :class="menu.icon"></i>
                        <span>{{menu.text}}</span>
                    </template>
                    <template v-for="(child,k) in menu.children">
                        <el-menu-item 
                            v-if="!child.hide"
                            :key="k"
                            :index="child.path"
                            >
                            <span slot="title">{{child.text}}</span>
                        </el-menu-item>
                    </template>
                </el-submenu>
            </template>
        </template>
    </el-menu>
</template>


<script>
import { menus } from "@/utils/menus";
export default {
    props:['userinfo'],
    data() {
        return {
        menus,
        currentpath: this.$route.path,
        roleid:sessionStorage.getItem("roleid")
        };
    },
    watch:{
            "$route":function(to,from){
                this.currentpath = to.path;
            }
        },
    methods: {
        handleOpen() {},
        handleClose() {},
    },
};
</script>